import React, {useEffect, useState} from 'react'
import SearchHead from '../components/SearchHead'
import TableCompon from '../components/TableCompon' // 引入表格组件
import {message, Tag} from 'antd'
import {EditOutlined,} from '@ant-design/icons'
import "./index.less" // 引人自定义样式
import {fetchRequest} from '@/utils/Request'
import {url} from '@/utils/url'
import moment from 'moment'
import Particulars from '../components/Particulars'
import exportExcel from '@/utils/exportExcel'
import useRequest from '@umijs/use-request'

interface RecordParams {
    deptId: string,
    startDate: string,
    endDate: string,
    healthCodeStatus: any,
    pageStart: number,
    pageSize: number,
    flag: boolean,
    deviceType: number
}

var title = "人脸一体机记录表"

const list = [
    {text: '告警', key: 1},
    {text: '危险', key: 2},
    // { text: '异常人员：告警、危险', key: 6 }
]
const lists = [
    {text: '正常', key: 0, color: "#0ec671"},
    {text: '告警', key: 1, color: "#fad914"},
    {text: '危险', key: 2, color: "#da0909"},
    {text: '未知', key: 3, color: "#eee"},
    {text: '数据异常', key: 4, color: "#eee"},
    {text: '验证失败', key: 5, color: "#eee"},
    {text: '异常人员：告警、危险', key: 6, color: "#eee"}
]
const category = 1

function Index() {
    const columns = [
        // {
        //     title: "访客姓名",
        //     dataIndex: "visitorName",
        //     key: 'visitorName'
        // },
        // {
        //     title: "电话号码",
        //     dataIndex: "visitorTel",
        //     key: 'visitorTel'
        // },
        {
            title: "防疫核验",
            dataIndex: "healthCodeStatus",
            key: 'healthCodeStatus',
            render: (state: string) => {
                const temState = state || 0;
                const item: any = lists.find(item => item.key === temState)
                return <Tag color={item.color}>{item.text}</Tag>
            }
        },
        {
            title: "设备地址",
            dataIndex: "devLocation",
            key: 'devLocation',
            // render: (text: string) => getOriginString(text)
        }, {
            title: "到访时间",
            dataIndex: "visitTime",
            key: 'visitTime'
        }, {
            title: "操作",
            render: (record: any) =>
                <Tag className="tags-hover" color="#00BFFF"
                     icon={<EditOutlined/>} onClick={() => {
                    modification(record)
                }}>查看详情</Tag>
        }]
    // 查看详情方法
    const modification = (record: any) => {
        setVisible(true)
        setdetail(record)
    }
    const [RecordParams, setRecordParams] = useState<RecordParams>({
        deptId: "",
        startDate: "",
        endDate: "",
        healthCodeStatus: "",
        pageStart: 1,
        pageSize: 10,
        flag: false,
        deviceType: 1
    }) // 设置默认表格参数
    const [tableData, settableData] = useState([]) // 表格数据
    const [visible, setVisible] = useState(false); // 设置详情页是否展示
    const [detail, setdetail] = useState<any>() // 详情页数据
    const [TabsData, setTabsData] = useState(1)

    const TabsChange = (val: any) => {
        setTabsData(val)
        settableData([])

        switch (val) {
            case '1':
                title = '人脸一体机记录表';
                break;
            case '2':
                title = '绿码通设备记录表';
                break;
            default:
                break;
        }
    }
    //  发送请求 拿到表格数据
    const getAbnormal = async (params: any) => {
        try {
            const json = await fetchRequest(url.GET_ABNORMAL, params);
            if (json.success) {
                settableData(json.data)
            } else {
                message.error(json.errorMsg)
            }
        } catch (error: any) {
            message.error(error.message)

        }
    }
    // 发送表格数据请求传参
    const getTableData = useRequest(getAbnormal, {
        manual: true,
        loadingDelay: 200
    })
    useEffect(() => {
    }, [])
    const pageChange = (page: any) => {
        setRecordParams({
            ...RecordParams, pageStart: page
        })
        getTableData.run(RecordParams)
    }

    // 导出记录
    const download = async () => {
        if (!RecordParams.flag) {
            message.error('请点击查询')
            return
        }
        const {success, data, errorMsg} = await fetchRequest(url.GET_EXPORT, RecordParams)
        if (success) {
            const tempKeys = {}
            columns.map(item => {
                if (item.key) {
                    tempKeys[item.key] = item.title
                }
            })
            const datas = data.map((item: any) => {
                const tempItem = {}
                Object.keys(tempKeys).map(keyItem => {
                    tempItem[tempKeys[keyItem]] = item[keyItem]
                })
                tempItem['防疫核验'] = lists.find(listItem => listItem.key === item?.healthCodeStatus)?.text
                return tempItem
            })
            exportExcel(datas, '异常人员记录.xlsx')
        } else {
            message.error(errorMsg)
        }
    }

    //点击搜索按钮修改表格参数
    function handleFinish(values: any) {
        if (!values.allAddress) {
            message.error("校区不能为空")
            return
        }
        setRecordParams({
            ...RecordParams, deptId: typeof values.allAddress === "undefined" ? "" : values.allAddress,
            startDate: typeof values.times === "undefined" ? "" : moment(values.times[0]).format("YYYY-MM-DD 00:00:00"),
            endDate: typeof values.times === "undefined" ? "" : moment(values.times[1]).format("YYYY-MM-DD 23:59:59"),
            healthCodeStatus: typeof values.accessCardState === "undefined" ? 6 : values.accessCardState,
            deviceType: TabsData,
            flag: true,
        })
        getTableData.run({
            deptId: typeof values.allAddress === "undefined" ? "" : values.allAddress,
            startDate: typeof values.times === "undefined" ? "" : moment(values.times[0]).format("YYYY-MM-DD 00:00:00"),
            endDate: typeof values.times === "undefined" ? "" : moment(values.times[1]).format("YYYY-MM-DD 23:59:59"),
            healthCodeStatus: typeof values.accessCardState === "undefined" ? 6 : values.accessCardState,
            pageStart: 1,
            pageSize: 10,
            flag: true,
            deviceType: TabsData
        })
    }

    return (
        <div className="Abnormal">
            <SearchHead handleFinish={handleFinish} download={download} list={list} category={category}
                        TabsChange={TabsChange}/>
            <TableCompon columns={columns} title={title} tableData={tableData} pageChange={pageChange}/>
            <Particulars visible={visible} setVisible={setVisible} detail={detail}/>
        </div>
    )
}

export default Index
